{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Django RBAC 项目{% endblock %}</title>
    {#    浏览器图标#}
    <link rel="icon" type="image/svg+xml" href="{% static 'svg/s-user-backup.svg' %}">
    <link href="{% static "/css/tailwind.min.css" %}" rel="stylesheet">
    <style>
    </style>
</head>
<body class="bg-gray-100">
<header class="bg-blue-600 text-white p-4">
    <nav class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="{% static 'svg/s-user-backup.svg' %}" alt="Logo" class="w-15 h-12 mr-5">
            <a href="/" class="text-2xl font-bold">RBAC 系统</a>
        </div>
        <ul class="flex space-x-4 items-center">
            {% if user.is_authenticated %}
                <li><a href="{% url 'home' %}" class="hover:underline">首页</a></li>
                <li><a href="{% url 'user_list' %}" class="hover:underline">用户管理</a></li>
                <li><a href="{% url 'document_list' %}" class="hover:underline">文档管理</a></li>
                <li><a href="{% url 'chat' %}" class="hover:underline">AI 助手</a></li>



                <!-- 系统设置下拉菜单 -->
                <li class="dropdown relative">
                    <button id="systemSettingsDropdown" class="hover:underline flex items-center space-x-1">
                        <span>系统设置</span>
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div id="systemSettingsMenu"
                         class="dropdown-menu hidden absolute left-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-2 ring-black ring-opacity-5 z-50">
                        <div class="py-2">
                            <a href="{% url 'manage_permissions' %}"
                               class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                权限管理
                            </a>
                            <a href="{% url 'manage_roles' %}"
                               class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                角色管理
                            </a>
                            <a href="{% url 'view_system_logs' %}"
                               class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                系统日志
                            </a>
                        </div>
                    </div>
                </li>

                <li><a href="{% url 'profile' user.id %}" class="hover:underline">{{ user.username }}</a></li>
                <li><a href="#" onclick="showLogoutModal()" class="hover:underline">登出</a></li>
            {% else %}
                <li><a href="{% url 'login' %}" class="hover:underline">登录</a></li>
                <li><a href="{% url 'register' %}" class="hover:underline">注册</a></li>
            {% endif %}
        </ul>
    </nav>
</header>

<main class="container mx-auto mt-8 p-4">
    {% if messages %}
        <div class="messages mb-4" id="message-container">
            {% for message in messages %}
                <div class="bg-{% if message.tags == 'error' %}red{% else %}green{% endif %}-100 border border-{% if message.tags == 'error' %}red{% else %}green{% endif %}-400 text-{% if message.tags == 'error' %}red{% else %}green{% endif %}-700 px-4 py-3 rounded relative"
                     role="alert">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {% block content %}
    {% endblock %}
</main>

<footer class="bg-gray-200 text-center p-4 mt-8">
    <p>&copy; 2025 Django RBAC 项目. 保留所有权利。</p>
</footer>

<!-- 登出确认弹窗 -->
<div id="logoutModal" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog"
     aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="sm:flex sm:items-start">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                        <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                        </svg>
                    </div>
                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                        <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                            确认登出
                        </h3>
                        <div class="mt-2">
                            <p class="text-sm text-gray-500">
                                您确定要退出登录吗？
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button"
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                        onclick="logout()">
                    确认登出
                </button>
                <button type="button"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                        onclick="closeLogoutModal()">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        const messageContainer = document.getElementById('message-container');
        if (messageContainer) {
            setTimeout(() => {
                messageContainer.style.display = 'none';
            }, 3000);
        }

        // 为所有登出链接添加点击事件
        var logoutLinks = document.querySelectorAll('a[href="{% url 'logout' %}"]');
        logoutLinks.forEach(function (link) {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                showLogoutModal();
            });
        });

        // 处理点击其他区域关闭下拉菜单
        document.addEventListener('click', function (event) {
            const dropdowns = document.querySelectorAll('.dropdown-menu');
            dropdowns.forEach(dropdown => {
                if (!event.target.closest('.dropdown')) {
                    dropdown.classList.add('hidden');
                }
            });
        });
    });

    function logout() {
        window.location.href = "{% url 'logout' %}";
    }

    function showLogoutModal() {
        document.getElementById('logoutModal').classList.remove('hidden');
    }

    function closeLogoutModal() {
        document.getElementById('logoutModal').classList.add('hidden');
    }

    // 系统设置下拉菜单控制
    const systemSettingsDropdown = document.getElementById('systemSettingsDropdown');
    const systemSettingsMenu = document.getElementById('systemSettingsMenu');
    let isMenuOpen = false;

    systemSettingsDropdown.addEventListener('click', (e) => {
        e.stopPropagation();
        isMenuOpen = !isMenuOpen;
        systemSettingsMenu.classList.toggle('hidden', !isMenuOpen);
    });

    systemSettingsMenu.addEventListener('click', (e) => {
        e.stopPropagation();
    });

    document.addEventListener('click', () => {
        if (isMenuOpen) {
            isMenuOpen = false;
            systemSettingsMenu.classList.add('hidden');
        }
    });
</script>
</body>
</html>

